<template>
  <div class="home">
    <my-header>
      <!-- v-slot 简写形式是# -->
      <template #center>
         商品列表
      </template>
    </my-header>
    <tab-cart :tabList="goodsList" @tabCut="tabCut"></tab-cart>
    <ul>
      <li v-for="(item,index) in showlist" :key="index">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120808%2F6608733_171352892000_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643506983&t=4da568f1b1ee9a1c85a879780fea8e45" alt="">
        <section>
          <h4>{{item.name}}</h4>
          <p>￥{{item.price}}</p>
          <div>
            <span>{{item.payNum}}人付款</span>
            <button @click="add(item)">+</button>
          </div>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue';
// @ is an alias to /src
import axios from 'axios';
import TabCart from '../components/tabCart.vue';
import { reactive,toRefs } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name: 'Home',
  components: {
    MyHeader,
    TabCart
  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
       goodsList: [], // 商品的数据]
       showlist: [], // 展示的商品数据
    })
    axios.get('goods.json').then(res => {
        data.goodsList = res.data;
        tabCut(0);
        // data.showlist = data.goodsList[0].child;
    })

    const tabCut = (i) => {
       data.showlist = data.goodsList[i].child;
      //  console.log(data.showlist);
    }
    const add = (val) => {
      //  console.log(val);
       let obj = {
         ...val,
         num: 1,
         ischeck: false
       }
       store.commit('addCart', obj);
       router.push('/about');
    }
    return{
      ...toRefs(data),
      tabCut,
      add
    }
  }
}
</script>
<style lang="scss" scoped>
    li{
      display: flex;
      padding: 10px;
      img{
        width: 100px;
      }
      section{
        margin-left: 10px;
        flex: 1;
        p{
          color: rgb(155, 13, 173);
        }
        div{
          font-size: 14px;
          color: #999;
        }
        button{
          float: right;
          border: none;
          padding: 3px 9px;
          border-radius: 12px;
          background: orchid;
          color: #fff;
        }
      }
    }
</style>
